{% extends theme_path('base.html') %}

{% block title %}需要密码 - {{ article.title }}{% endblock %}

{% block content %}
<div class="max-w-md mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-8">
        <h1 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">
            此文章需要密码访问
        </h1>
        <p class="text-gray-600 dark:text-gray-400 mb-6">
            请输入密码以访问《{{ article.title }}》
        </p>
        
        <div class="mb-4">
            <input type="password" 
                   id="password" 
                   value="{{ request.args.get('password', '') }}"
                   class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                          focus:outline-none focus:ring-2 focus:ring-blue-500 
                          bg-white dark:bg-gray-700 
                          text-gray-900 dark:text-white"
                   placeholder="请输入访问密码">
        </div>
        <div id="error-message" class="text-red-500 text-sm mb-4 hidden"></div>
        <div class="flex justify-end">
            <button onclick="submitPassword()"
                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                确认
            </button>
        </div>
    </div>
</div>

<script>
function submitPassword() {
    const password = document.getElementById('password').value;
    if (!password) {
        const errorDiv = document.getElementById('error-message');
        errorDiv.textContent = '请输入密码';
        errorDiv.classList.remove('hidden');
        return;
    }
    
    // 重定向到带密码的 URL
    window.location.href = "{{ ArticleUrlGenerator.generate(article.id, article.category_id, article.created_at) }}?password=" + encodeURIComponent(password);
}

// 支持回车提交
document.getElementById('password').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        submitPassword();
    }
});

// 如果 URL 中已有密码且错误，显示错误信息
{% if request.args.get('password') %}
    {% if error_message %}
    const errorDiv = document.getElementById('error-message');
    errorDiv.textContent = '{{ error_message }}';
    errorDiv.classList.remove('hidden');
    {% endif %}
{% endif %}
</script>
{% endblock %} 